<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>登录</title>
	<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
	<link rel="stylesheet" type="text/css" href="/stylesheets/body.css" />
	<script type="text/javascript" src="/javascripts/jquery-1.8.3.min.js"></script>
</head>

<body>
	<div id="rodeAlert" class="alert alert-warning hide">
		<a href="#" class="close" data-dismiss="alert">&times;</a>
		<strong>警告！</strong>该角色已存在。
</div>
	<div class="dwo">
		<div class="panda">
			<div class="ear"></div>
			<div class="face">
				<div class="eye-shade"></div>
				<div class="eye-white">
					<div class="eye-ball"></div>
				</div>
				<div class="eye-shade rgt"></div>
				<div class="eye-white rgt">
					<div class="eye-ball"></div>
				</div>
				<div class="nose"></div>
				<div class="mouth"></div>
			</div>
			<div class="body"> </div>
			<div class="foot">
				<div class="finger"></div>
			</div>
			<div class="foot rgt">
				<div class="finger"></div>
			</div>
		</div>
		<form action="/checkLogin" method="post">
			<div class="hand"></div>
			<div class="hand rgt"></div>
			<h1>总管理后台</h1>
			<div class="form-group">
				<input type="text"  required="required" id="account" name="account" class="form-control">
				<label class="form-label">用户名</label>
			</div>
			<div class="form-group">
				<input type="password"  required="required" id="password" name="password" class="form-control">
				<label class="form-label">密码</label>
				<p class="alert">验证未通过！</p>
			</div>
			<button class="btn" type="submit" id="js-btn-login">登 录</button>
		</form>
	</div>
	<!-- container -->
	<script>
		$('#password').focusin(function () {
			$('form').addClass('up')
		})
		$('#password').focusout(function () {
			$('form').removeClass('up')
		})

		// 眼睛移动
		$(document).on('mousemove', function (event) {
			var dw = $(document).width() / 15
			var dh = $(document).height() / 15
			var x = event.pageX / dw
			var y = event.pageY / dh
			$('.eye-ball').css({
				width: x,
				height: y
			})
		})

// 表单验证
$('.btn').click(function () {
  $('form').addClass('wrong-entry')
  setTimeout(function () {
      $('form').removeClass('wrong-entry')
  }, 3000)
})
	</script>
</body>

</html>
